<template>
  <div>
    <el-button-group style="margin-bottom:20px;">
      <el-button type="success" @click="add">新增</el-button>
      <el-button type="info" @click="update">修改</el-button>
      <el-button type="warning" @click="shan">删除</el-button>
    </el-button-group>
    <!-- 表格 -->
    <el-table
      ref="singleTable"
      :data="list"
      border
      stripe
      highlight-current-row
      style="text-align:center"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column property="shuliang" label="数量"></el-table-column>
      <el-table-column property="time" label="时间"></el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog title="提示" :visible.sync="modalShow" width="30%" :before-close="qx">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="数量">
          <el-input v-model="form.shuliang"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-left:210px;">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlerPage"
      style="margin-top:20px"
    ></el-pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "xiaoshou"
);
export default {
  name: "Xiaoshou",
  mounted() {
    this.getList();
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions(["getList", "save", "del", "handlerPage"]),
    ...mapMutations([
      "setmodal",
      "setform",
      "setidArr",
      "setisupdate",
      "setuparr"
    ]),
    selectionChange(sel) {
      this.setidArr(sel);
    },
    add() {
      this.setmodal(true);
      this.setisupdate(false);
      this.setform({});
    },
    qx() {
      this.setmodal(false);
      this.setform({});
    },
    ok() {
      this.save().then(() => {
        if (this.isupdate) {
          this.$message({
            message: "恭喜修改成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "恭喜新增成功",
            type: "success"
          });
        }
      });
    },
    shan() {
      if (this.idArr.length) {
        this.del().then(() => {
          this.$message({
            message: "恭喜删除成功",
            type: "success"
          });
        });
      } else {
        this.$message({
          message: "请选择需要删除的项目",
          type: "warning"
        });
      }
    },
    update() {
      if (this.idArr.length == 1) {
        this.setmodal(true);
      } else {
        this.$message({
          message: "请选择一项需要修改的项目",
          type: "warning"
        });
      }

      this.setisupdate(true);
      this.setform(this.upadd);
    }
  },
  computed: {
    ...mapState([
      "list",
      "form",
      "modalShow",
      "upadd",
      "isupdate",
      "total",
      "pageSize",
      "currentPage",
      "idArr"
    ])
  }
};
</script>

<style>
</style>
